import ScrollView from "@/base_ui/scroll-view"
import RoomItem from "@/components/room-item"
import SectionFooter from "@/components/section-footer"
import SectionHeader from "@/components/section-header"
import PropTypes from "prop-types"
import React, { memo } from "react"
import { SectionV3Wrapper } from "./style"

const HomeSectionV3 = memo((props) => {
  const { dataInfo } = props
  return (
    <SectionV3Wrapper>
      <SectionHeader title={dataInfo.title} subTitle={dataInfo.subtitle} />
      <div className="plus-info">
        <ScrollView>
          {dataInfo.list.map((item) => {
            return <RoomItem itemWidth="20%" itemData={item} key={item.id} />
          })}
        </ScrollView>
      </div>
      <SectionFooter name="plus"/>
    </SectionV3Wrapper>
  )
})

HomeSectionV3.propTypes = {
  dataInfo: PropTypes.object,
}

export default HomeSectionV3
